<template>
  <!-- 不合格记录 -->
  <div id="criticalValue">
    <Breadcrumb content="不合格记录" />
    <div class="bodyContent">
      <vxe-toolbar perfect>
        <template #buttons>
          <vxe-form ref="criticalValueForm" title-align="right" title-width="60" :data="form">

            <vxe-form-gather span="24">
              <vxe-form-item title="记录类型" field="type">
                <template #default="{ data }">
                  <vxe-select style="width: 100px" class-name="margin-lr-xs" v-model="form.type" placeholder="类型" @change="findWtList">
                    <vxe-option v-for="(item, index) in typeList" :key="index" :value="item.code" :label="item.name"></vxe-option>
                  </vxe-select>
                </template>
              </vxe-form-item>
              <vxe-form-item title="登记时间" field="scheduleDate">
                <template #default="{ data }">
                  <vxe-input v-model="data.operatorTimeStart" placeholder="开始日期" type="date" @change="findWtList"></vxe-input>
                  至
                  <vxe-input v-model="data.operatorTimeEnd" placeholder="结束日期" type="date" transfer @change="findWtList"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="申请科室" field="reqDept">
                <VxePulldownSelection :url="'/api/sys/findSysOrgDepartmentList'" @confirmClick="dropPullDownConfirm" :tableColumn="[
                 { field: 'code', title: '编码'}, 
                 { field: 'name', title: '名称' }]" :aimKeys="[
                 { aimKey: 'reqDept', rowKey: 'code' },
                  { aimKey: 'reqDeptNa', rowKey: 'name' }
                  ]" :displayTexts="['name']" :displayTextObj="form.reqDept ? form.reqDept : ''" />
              </vxe-form-item>
              <vxe-form-item title="病人姓名" field="patNa">
                <template #default="{ data }">
                  <vxe-input v-model="data.patNa" clearable @clear="findWtList" @keyup="keyupEnter"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="条码号" field="reqNo">
                <template #default="{ data }">
                  <vxe-input v-model="data.reqNo" clearable @clear="findWtList" @keyup="keyupEnter"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item title="标本号" :visible="form.type == '1'" field="sampleNo">
                <template #default="{ data }">
                  <vxe-input v-model="data.sampleNo" clearable @clear="findWtList" @keyup="keyupEnter"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item>
                <el-button size="small" type="primary" @click="findWtList">查询</el-button>
                <el-button size="small" type="primary" @click="exportData">导出</el-button>
              </vxe-form-item>

            </vxe-form-gather>
          </vxe-form>
        </template>
      </vxe-toolbar>

      <div class="tableBody">
        <vxe-table ref="criticalValueTable" v-loading="loading" border height="100%" :data="specimenRecords" align="left" :row-config="{ isCurrent: true, isHover: true }" resizable show-overflow>
          <vxe-column type="seq" title="#" width="30"></vxe-column>
          <vxe-column field="reportTime" title="登记时间" width="120">
            <template #default="{ row }">
              <span>{{ formatDateTime(row.operatorTime, 'yyyy-MM-dd')  }}</span>
            </template>
          </vxe-column>
          <vxe-column field="reqNo" title="条码号" width="120">
            <template #default="{ row }">
              <span>{{ row.reqNo }}</span>
            </template>
          </vxe-column>
          <vxe-column field="sampleNo" title="标本号" :visible="form.type == '1'" width="120">
            <template #default="{ row }">
              <span>{{ row.sampleNo}}</span>
            </template>
          </vxe-column>
          <vxe-column field="reqDeptNa" title="申请科室" width="80">
            <template #default="{ row }">
              <span>{{ row.reqDeptNa }}</span>
            </template>
          </vxe-column>
          <vxe-column field="patNa" title="病人姓名" width="80">
            <template #default="{ row }">
              <span>{{ row.patNa }}</span>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="性别" width="120">
            <template #default="{ row }">
              <span>{{ row.sex === '1' ? '男' : row.sex === '2' ? '女' : '未知' }}</span>
            </template>
          </vxe-column>
          <vxe-column field="age" title="年龄" width="40">
            <template #default="{ row }">
              <span>{{ row.age }}</span>
            </template>
          </vxe-column>
          <vxe-column field="reqPurpose" title="申请目的" width="150">
            <template #default="{ row }">
              <span>{{row.reqPurpose }}</span>
            </template>
          </vxe-column>
          <vxe-column field="testPurpose" title="检验目的" width="150">
            <template #default="{ row }">
              <span>{{row.testPurpose }}</span>
            </template>
          </vxe-column>
          <vxe-column field="exaItem" title="不合格原因">
            <template #default="{ row }">
              <span>{{row.illustrate }}</span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue';
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { IsEmpty, formatDateTime } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { AppStore } from '@/stores/store';
import VxePulldownSelection from '@/components/VxePulldownSelection.vue';

let store = AppStore();
let { proxy }: any = getCurrentInstance();
let loading = ref(false);
let specimenRecords = reactive([]);

let form = reactive({
  operatorTimeStart: formatDateTime(new Date(), 'yyyy-MM-dd'),
  operatorTimeEnd: formatDateTime(new Date(), 'yyyy-MM-dd'),
  type: '0',
  reqNo: '',
  sampleNo: '',
  patNa: '',
  reqDept: ''
});
let typeList = reactive([
  { code: '0', name: '申请记录' },
  { code: '1', name: '标本记录' }
]);

// 页面加载时字典
onMounted(() => {
  findWtList();
});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findWtList();
  }
}

function findWtList() {
  specimenRecords.length = 0;
  const url = '/lab/req/unqualified/getUnqualifiedRecord';
 loading.value = true;
  form.operatorTimeStart = IsEmpty(form.operatorTimeStart) ? '' : formatDateTime(form.operatorTimeStart, 'yyyy-MM-dd') + ' 00:00:00';
  form.operatorTimeEnd = IsEmpty(form.operatorTimeEnd) ? '' : formatDateTime(form.operatorTimeEnd, 'yyyy-MM-dd') + ' 23:59:59';
  proxy.$http
    .post(url, form)
    .then((res: any) => {
      specimenRecords.push(...res.data);
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
      VxeMessage(err, VxeNotifyType.error);
    });
}

function dropPullDownConfirm(e) {
  e.aimKeys.forEach((m) => {
    form[m.aimKey] = e.row[m.rowKey];
  });
  findWtList();
}
function exportData() {
  if (specimenRecords.length == 0){
    VxeMessage('没有数据', VxeNotifyType.warning);
    return;
  }
  const $table = proxy.$refs.criticalValueTable as any;
  $table.exportData({ data: specimenRecords, type: 'csv', filename: '不合格记录', useStyle: true });

}
</script>
<style lang="scss" scoped>
#criticalValue {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .vxe-form {
      padding: 5px 10px;
      :deep(.vxe-form--item) {
        margin: 0 10px 0 0;
      }
    }
    .tableBody {
      background-color: $base-white;
      height: calc(100% - 76px);
    }
  }
  // 表格最左侧5px间距
  :deep(.vxe-cell) {
    padding-left: 5px;
  }

  :deep(.vxe-form) {
    .vxe-input.type--datetime,
    .vxe-input.type--date {
      width: 150px;
    }

    .el-date-editor {
      height: 24px;
    }

    .el-range-editor.el-input__inner {
      padding: 0;
      width: 320px;
      border-radius: 0;
    }
  }
}
</style>
